<template>
  <div class="login-container">
    <!-- <div style="width:400px;height:450px;margin:150px auto;background-color:rgba(107,149,224,0.5);border-radius:10px"> -->
    <div style="width:400px;height:450px;margin:150px auto;background-color:rgba(240,240,240,0.5);border-radius:10px">
    <!-- <div style="width:400px;height:450px;margin:150px auto;background-color:rgba(255, 255, 255, 0.7);border-radius:10px; background-image: url('your-image.jpg'); background-size:cover; background-position:center;"> -->
  <!-- 这里是你的内容 -->
<!-- </div> -->
  
      <div style="width:100%;height:100px;font-size:30px;line-height:100px;text-align:center;color:#4a5ed0">登录</div>
      <div style="margin-top:25px;text-align:center;height:320px;">
        <el-form :model="admin">

          <el-form-item>
            <el-input v-model="admin.name" prefix-icon="el-icon-user" style="width:80%" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="admin.password" show-password prefix-icon="el-icon-lock" style="width:80%" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width:80%;margin-top:10px" type="primary" @click="login()">登录</el-button>
            <!-- <el-button :loading="loading" style="width:80%;margin-top:10px" type="primary" @click="login()">
              <span v-if="!loading">Login</span>
              <span v-else>Login...</span>
            </el-button> -->
          </el-form-item>

          <el-form-item>
            <div style="display: flex; justify-content: center">
              <el-input v-model="admin.verCode" prefix-icon="el-icon-user" style="width: 42%; margin-right: 10px" placeholder="请输入验证码"></el-input>
              <img :src="captchaUrl" @click="clickImg()"  width="140px" height="33px" />
            </div>
          </el-form-item>

          <div style="text-align: center">
            忘记密码?<a href="javascript:void(0)" style="text-decoration: none" @click="navReset">重置密码</a>
          </div>
          <div style="text-align: center">
            没有账号?<a href="javascript:void(0)" style="text-decoration: none" @click="navRegister">注册</a>
          </div>
          
        </el-form>
        
        
      </div>

    </div>

  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name:"Login",
  data() {
    return {
      admin:{
        
      },
      key: '',
      captchaUrl:'',
      loading: false
    }
    
  },
  //页面加载的时候，做一些事情，在created里面
  mounted(){
      this.key = Math.random()
      this.captchaUrl = 'http://localhost:8080/api/captcha?key=' + this.key
  },
  //定义一些页面上空间触发的事件调用的方法
  methods:{
    login(){
     request.post("/admin/login?key=" + this.key,this.admin).then(res =>{
     //request.post("/admin/login",this.admin).then(res =>{
      if(res.code === '0'){
          this.$message.success("登录成功")
          localStorage.setItem("user",JSON.stringify(res.data))
          this.$router.push('/')
      }else{
          this.$message.error(res.msg)
          this.key = Math.random()
          this.captchaUrl = 'http://localhost:8080/api/captcha?key=' + this.key
          this.admin.verCode = ''
      }
      
    })
    },
    navRegister(){
      this.$router.push("/register")
    },
    navReset(){
      this.$router.push("/reset")
    },
    clickImg(){
      this.key = Math.random()
      this.captchaUrl = 'http://localhost:8080/api/captcha?key=' + this.key
    }
    
  }
}
  </script>

  <style scoped>
.login-container {
  height: 100vh;
  overflow: hidden;
  /* background-image: url("@/assets/login_bg.jpg"); */
  background-image: url("@/assets/eye.jpg");
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>